<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="common_include :: commonHead('部门树')"/>
<link th:href="@{/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<style>
    body {
        height: auto;
        font-family: "Microsoft YaHei";
    }

    button {
        font-family: "SimSun", "Helvetica Neue", Helvetica, Arial;
    }
</style>
<body class="hold-transition box box-main">
<input id="deptid" name="deptid" type="hidden"/>
<input id="deptName" name="deptName" type="hidden"/>
<div class="wrapper">
    <div class="treeShowHideButton" onclick="search();">
        <label id="btnShow" title="显示搜索" style="display:none;"><i class="fa fa-plus-square-o"></i></label>
        <label id="btnHide" title="隐藏搜索"><i class="fa fa-minus-square-o"></i></label>
    </div>
    <div class="treeSearchInput" id="search">
        <label for="keyword">关键字：</label><input type="text" class="empty" id="keyword" maxlength="50">
        <button class="btn" id="btn" onclick="searchNode()"> 搜索</button>
    </div>
    <div class="treeExpandCollapse">
        <a href="javascript:" id="btnExpand">展开</a> /
        <a href="javascript:" id="btnCollapse">折叠</a>
    </div>
    <div id="tree" class="ztree treeselect"></div>
</div>
<div th:include="common_include :: commonFoot"/>
<script th:src="@{/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script th:inline="javascript">
    // 树结构初始化加载
    var setting = {
        view: {selectedMulti: false}, data: {key: {title: "title"}, simpleData: {enable: true}},
        callback: {
            onClick: function (event, treeId, treeNode) {
                $("#deptid").val(treeNode.id);
                $("#deptName").val(treeNode.name);
            }
        }
    }, tree, loadTree = function () {
        $.get(ctx + "upms/dept/deptTreeData", function (data) {
            tree = $.fn.zTree.init($("#tree"), setting, data);
        }, null, null, "正在加载，请稍后...");
    };
    loadTree();

    function selectCheckNode(treeName, node) {
        if (treeName == node.name) {
            tree.selectNode(node, true);
        }
    }

    $('#btnExpand').click(function () {
        tree.expandAll(true);
    });
    $('#btnCollapse').click(function () {
        tree.expandAll(false);
    });

    function submitClick() {
        parent.$("#deptid").val($("#deptid").val());
        parent.$("#deptName").val($("#deptName").val());
        var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
        parent.layer.close(index);
    }

    var lastValue = "", nodeList = [], key = $("#keyword");
    key.bind("focus", focusKey).bind("blur", blurKey).bind("change cut input propertychange", searchNode);
    key.bind("keydown", function (e) {
        if (e.which == 13) {
            searchNode();
        }
    });

    function focusKey(e) {
        if (key.hasClass("empty")) {
            key.removeClass("empty");
        }
    }

    function blurKey(e) {
        if (key.get(0).value === "") {
            key.addClass("empty");
        }
        searchNode(e);
    }

    function searchNode() {
        var value = $.trim(key.get(0).value);
        var keyType = "name";
        if (lastValue === value) {
            return;
        }
        lastValue = value;
        var nodes = tree.getNodes();
        if (value == "") {
            showAllNode(nodes);
            return;
        }
        hideAllNode(nodes);
        nodeList = tree.getNodesByParamFuzzy(keyType, value);
        updateNodes(nodeList);
    }

    function hideAllNode(nodes) {
        var tree = $.fn.zTree.getZTreeObj("tree");
        nodes = tree.transformToArray(nodes);
        for (var i = nodes.length - 1; i >= 0; i--) {
            tree.hideNode(nodes[i]);
        }
    }

    function showAllNode(nodes) {
        nodes = tree.transformToArray(nodes);
        for (var i = nodes.length - 1; i >= 0; i--) {
            if (nodes[i].getParentNode() != null) {
                tree.expandNode(nodes[i], false, false, false, false);
            } else {
                tree.expandNode(nodes[i], true, true, false, false);
            }
            tree.showNode(nodes[i]);
            showAllNode(nodes[i].children);
        }
    }

    function updateNodes(nodeList) {
        tree.showNodes(nodeList);
        for (var i = 0, l = nodeList.length; i < l; i++) {
            var treeNode = nodeList[i];
            showChildren(treeNode);
            showParent(treeNode)
        }
    }

    function showChildren(treeNode) {
        if (treeNode.isParent) {
            for (var idx in treeNode.children) {
                var node = treeNode.children[idx];
                tree.showNode(node);
                showChildren(node);
            }
        }
    }

    function showParent(treeNode) {
        var parentNode;
        while ((parentNode = treeNode.getParentNode()) != null) {
            tree.showNode(parentNode);
            tree.expandNode(parentNode, true, false, false);
            treeNode = parentNode;
        }
    }

    function search($this) {
        $('#search').slideToggle(200);
        $('#btnShow').toggle();
        $('#btnHide').toggle();
        $('#keyword').focus();
    }
</script>
</body>
</html>
